<template>
  <div>
    
    <div class="title">
          <textarea  id="titleInput" placeholder="请输入文章标题  (5~100个字)" maxlength="100" v-model.trim="article.title"></textarea>
          <el-button type="danger" plain class="savepage" @click="savePage">保存草稿</el-button>
          <el-button type="danger" class="publishArticle" @click="showPublishPassport">发布文章</el-button>
    </div>
    <mavon-editor v-model.trim="article.content"/>
    <PublishPassport :article="article"></PublishPassport>
  </div>
</template>

<script>
import PublishPassport from "@/components/publish/PublishPassport.vue"
import { Message } from 'element-ui';
import {savapage} from "@/api/article"
import {getArticleById}  from "@/api/article"
import SnowflakeId from "snowflake-id";
const snowflake = new SnowflakeId({
    mid: 42,
    offset: (2019 - 1970) * 31536000 * 1000
});
export default {
  name:"PublishBody",
  components:{
    PublishPassport
  },
  data() {
    return {
      article:{
        articleId:"",
        title:"",
        summarize:"",
        content:"",
        tags:[],
        cover:"",
        sendwho:""
      },
        
    }
  },
  methods: {
    showPublishPassport(){
      if(this.article.title==""&&this.article.content==""){
              Message.info("内容不能为空")
             }else if(this.article.title==""){
              Message.info("标题不能为空")
             }else{
              this.$store.commit("PUBLISHSHOW",true)

             setTimeout(()=>{
                document.addEventListener('click',this.add,false)     
             },300) 

             }
           
         
    },
    add(e){
                let value=e.target.className
                console.log(value);
                if(value=="el-icon-close"||value.includes("cancel")){
                    this.$store.commit("PUBLISHSHOW",false) 
                    document.removeEventListener('click',this.add)
                }
               
        },
        savePage(){
             if(this.article.title==""&&this.article.content==""){
              Message.info("内容不能为空")
             }else if(this.article.title==""){
              Message.info("标题不能为空")
             }
             else{
              if(this.article.articleId==""){
                var articleid = snowflake.generate();
                this.article.articleId=articleid;
              }
              savapage(this.article)
             }
        },
        getid(){
          var url=location.search;
          var articleId=url.slice(11);
          if(articleId!==""){
            getArticleById(articleId).then(article=>{
              this.article=article;
            });
          }
          

        }

  },
  mounted(){
    this.getid();
  
  }
}
</script>

<style scoped>
.title{
    width: 100%;
    height: 60px;
    /* background-color: blue; */
    /* border-bottom: 1px solid rgb(23, 22, 22,0.3) ; */
    line-height: 60px;
    margin: 0px 20px;
  }
  #titleInput{
    border: none;
    font-size: large;
    font-weight: bolder;
    padding: 10px;
    width: 500px;
    height: 30px;
    resize: none;
    overflow: hidden; /*去掉滚动条*/
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
  }
  #titleInput:focus{
    outline: none;
  }
  ::-webkit-input-placeholder { 

opacity: 0.6;
} 
.markdown-body {
    margin: 0px 20px;
    z-index: 1 !important;
  }
  .el-button{
    position: absolute;
    /* padding: 0px !important; */
  }
  .savepage{
    right: 160px;
  }
  .publishArticle{
    right: 40px;
  }


</style>